<template>
  <div>
    <page-list :x-uri="uri" :x-tabs="tabs" :doactions="doactions" :checkbox-item="false" :tree="true" :lazy="true" :lazy-fun="loadChild">
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button v-auth="'exam.question.point.create'" size="mini" type="primary" @click="createTop">新建知识点</el-button>
      </template>
    </page-list>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :close-on-click-modal="false" top="30vh" width="500px">
      <el-form v-if="dialogVisible" ref="point" :model="point" label-width="100px" size="small">
        <el-form-item v-if="cateVisible" label="分类">
          <el-cascader v-model="cateValue" :options="category" :props="{ expandTrigger: 'hover' }" @change="handleChange" />
        </el-form-item>
        <el-form-item label="知识点名称" prop="title" :rules="rulesTtitle" size="small">
          <edu-input key="title" :value.sync="point.title" :args="{ minlength: 1, maxlength: 30 }" />
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="end">
            <el-button type="primary" :disabled="disableSubmit" @click="onSubmit">保存</el-button>
            <el-button @click="dialogVisible = false">关闭</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue';
import EduInput from '@public/form/input.vue';
export default {
  components: {
    PageList,
    EduInput
  },
  inject: ['reload'],
  data() {
    return {
      uri: '/exam/admin/question/point/list',
      tabs: [
        {
          title: '知识点',
          uri: '/exam/question/point/list',
          meta: {
            permission: 'exam.question.point.list'
          }
        }
      ],
      doactions: [
        {
          title: '新增知识点',
          meta: { permission: 'exam.question.point.create' },
          callback: this.create,
          display: ({ row }) => {
            return row.pid === 0;
          }
        },
        { title: '编辑', meta: { permission: 'exam.question.point.edit' }, callback: this.edit },
        { title: '删除', meta: { permission: 'exam.question.point.delete' }, callback: this.delete }
      ],
      dialogTitle: '', // 弹出层标题
      cateTitle: '', // 分类名称
      dialogVisible: false,
      cateVisible: false,
      category: [],
      cateValue: [],
      disableSubmit: false,
      point: {
        title: ''
      },
      rulesTtitle: [
        { required: true, message: '知识点名称必须填写', trigger: ['blur', 'change'] },
        {
          pattern: /^.{1,30}$/,
          message: '知识点名称为1-30个字符',
          trigger: ['blur', 'change']
        }
      ]
    };
  },
  created() {
    this.loadCate();
  },
  methods: {
    loadCate: function() {
      var uri = '/exam/admin/category/tree';
      this.$http.send(
        'GET',
        uri,
        {},
        res => {
          this.category = res.data;
        },
        err => {
          this.$message.error(err.msg);
        },
        false
      );
    },
    handleChange: function(value) {
      this.cateValue = value;
      this.point.category = value;
    },
    // 新建分类
    createTop: function() {
      this.cateValue = [];
      this.point = {
        title: '',
        category: this.cateValue
      };
      this.dialogTitle = '新增知识点';
      this.dialogVisible = true;
      // 显示分类
      this.cateVisible = true;
    },
    // 新建知识点
    create: function({ row }) {
      this.point = {
        title: '',
        pid: row.id
      };
      this.dialogTitle = '新增知识点';
      this.dialogVisible = true;
      this.cateVisible = false;
      this.cateTitle = row.title;
    },
    // 编辑知识点
    edit: function({ row }) {
      if (row.pid === 0) {
        this.dialogTitle = '编辑知识点';
        this.cateVisible = true;
        this.cateValue = row.fullcategorypath;
        this.point = {
          id: row.id,
          title: row.title,
          category: this.cateValue
        };
      } else {
        this.dialogTitle = '编辑知识点';
        this.cateTitle = null;
        this.cateVisible = false;
        this.point = {
          id: row.id,
          title: row.title
        };
      }

      this.dialogVisible = true;
    },
    onSubmit: function() {
      if (this.point.category && !this.point.category.length) {
        this.$message.error('请选择分类');
      } else {
        this.$refs['point'].validate(valid => {
          if (valid) {
            this.disableSubmit = true;
            var method = 'POST';
            var uri = '/exam/admin/question/point/create';
            if (this.point.id) {
              method = 'PUT';
              uri = '/exam/admin/question/point/' + this.point.id + '/edit';
            }
            this.$http.send(
              method,
              uri,
              this.point,
              response => {
                this.$message.success(response.msg, _ => {
                  this.reload();
                });
              },
              error => {
                this.disableSubmit = false;
                this.$message.error(error.msg);
              },
              false
            );
          }
        });
      }
    },
    delete: function({ row }) {
      this.$box
        .confirm('确认删除吗')
        .then(() => {
          this.$http.delete(
            '/exam/admin/question/point/' + row.id + '/delete',
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            },
            false
          );
        })
        .catch(() => {});
    },
    loadChild: function(row, treeNode, resolve) {
      this.$http.get(
        '/exam/admin/question/point/' + row.id + '/children',
        {
          pid: row.id
        },
        ({ data }) => {
          resolve(data);
        },
        response => {
          resolve([]);
          this.$message.error(response.msg);
        },
        false
      );
    }
  }
};
</script>
